<!-- 售后保障 -->
<template>
	<view class="multiple-page">
		
		<view class="rich-box">
			
			
			<view class="member-div member-card">
				<view class="member-card-title">
					{{userInfo.level.title}}
				</view>
				<image class="members-logo" :src="userInfo.level.image"></image>
				<view class="member-card-title2">
					{{userInfo.nickname}}
				</view>
				<view class="member-card-value">
					升级可获更多会员权益
				</view>
			</view>
			
			
			<view class="member-div">
				<view class="title-div">
					<view class="title-value">
						会员权益
					</view>
					<view class="title-value2">
						<span style="color: #444;">已解锁</span>
            {{userInfo.level.is_mall_discount+userInfo.level.is_service+userInfo.level.is_birthday_benefit+userInfo.level.is_benefits}}项
					</view>
				</view>
				
				<view class="rights-div">
					<view class="rights-div-content" v-if="userInfo.level.is_mall_discount==1">
						<image src="/static/images/rights1.png"></image>
						<span>商城折扣</span>
					</view>
					<view class="rights-div-content" v-if="userInfo.level.is_service==1">
						<image src="/static/images/rights2.png"></image>
						<span>100%服务</span>
					</view>
					<view class="rights-div-content" v-if="userInfo.level.is_birthday_benefit==1">
						<image src="/static/images/rights3.png"></image>
						<span>生日福利</span>
					</view>
					<view class="rights-div-content" v-if="userInfo.level.is_benefits==1">
						<image src="/static/images/rights4.png"></image>
						<span>会员特权</span>
					</view>
				</view>
			</view>
			
			
			<view class="member-div" v-if="userInfo.level.discount_price<10 || userInfo.level.is_free_examination==1">
				<view class="title-div">
					<view class="title-value">
						会员专享价
					</view>
					<view class="title-value2">
						<span style="color: #444;">专属福利享不停</span>
					</view>
				</view>
				
				
				<view class="exclusive-div">
					<view class="exclusive-position">
						会员专享
					</view>
					
					<view class="exclusive-head">
						<image class="exclusive-image" src="/static/images/exclusive.png"></image>
						<view class="exclusive-title">
							会员专享
						</view>
					</view>
					
					<view class="exclusive-div2">
						<view class="exclusive-div-content" v-if="userInfo.level.discount_price<10">
							<view class="exclusive-div-title">
								{{userInfo.level.discount_price}}折
							</view>
							<view class="exclusive-div-title2">
								会员折扣价
							</view>
						</view>
						<view class="exclusive-div-content" v-if="userInfo.level.is_free_examination==1">
							<view class="exclusive-div-title">
								免费
							</view>
							<view class="exclusive-div-title2">
								免费考试
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="member-div">
				<view class="title-div title-value">
					会员规则
				</view>
				<u-parse :html="member.membership_rules"></u-parse>
			</view>
			
		</view>
		
		<view style="height: 70rpx;position: fixed;bottom: 0;z-index: 2;width: 100%;"></view>
	</view>
</template>

<script>

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
			isEmpty: false,
			tabCur: 'all',
			member: '',
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1
		};
	},
	// 是否登录
	computed: {
		...mapGetters(['isLogin', 'authType','userInfo']),
	},
	onLoad(e){
		let that = this;
		this.getMember();
	},
	methods: {
		// 检测
		checkActivity(data, type) {
			if (data) {
				return !data.includes(type);
			}
			return true;
		},
		// 路由跳转
		jump(path, parmas) {
			this.showShare = false;
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 回到首页
		goHome() {
			this.$Router.replaceAll('/pages/index/index');
		},

		// 选项卡
		onTab(id) {
			this.tabCurrent = id;
		},
		
		// 组件返回的type;
		changeType(e) {
			this.buyType = e;
		},
		// 组件返回的规格;
		getSkuText(e) {
			this.currentSkuText = e;
		},
		// 售后保障
		getMember() {
			let that = this;
			that.$http('circle.myMember', {
			}).then(res => {
				if (res.code === 1) {
					that.member = res.data;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.multiple-page{
	min-height: 100%;
	padding-top: 20rpx;
	padding-bottom: 70rpx;
}
.rich-box{
	margin: 25rpx;
}
.member-div{
	margin: 66rpx 0 66px 0;
}
.member-card{

	height: 354rpx;
	border-radius: 25rpx;
	background: url($IMG_URL+'/imgs/member-card.png') no-repeat;
	background-repeat: round;
	color: #fff;
	padding: 50rpx 40rpx 40rpx 40rpx;
	.member-card-title{
		font-size: 35rpx;
		margin-bottom: 18rpx;
	}
	.member-card-title2{
		font-size: 25rpx;
		margin-bottom: 20rpx;
	}
	.member-card-value{
		font-size: 28rpx;
	}
	.members-logo{
		width: 67rpx;
		height: 67rpx;
		margin-bottom: 30rpx;
	}
}
.title-div{
	display: flex;
	align-items: flex-end;
	margin-bottom: 22rpx;
}
.title-value{
	font-size: 35rpx;
	color: #444;
	font-weight: bold;
}
.title-value2{
	font-size: 27rpx;
	color: #444;
	margin-left: 20rpx;
}

.rights-div{
	background-color:#bebebe;
	box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(14,26,26,0.22);
	border-radius: 25rpx;
	padding: 33rpx 50rpx 33rpx 50rpx;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	.rights-div-content{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	image{
		width: 79rpx;
		height: 79rpx;
	}
	span{
		font-size: 25rpx;	
		color: #444;
		margin-top: 18rpx;
	}
}
.exclusive-div{
	background-color:#bebebe;
	box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(14,26,26,0.22);
	border-radius: 25rpx;
	padding: 30rpx 0 50rpx 0;
	position: relative;
	.exclusive-position{
		position: absolute;
		top: 0;
		right: 0;
		color: #444;
		background-color:#bebebe;
		font-size: 21rpx;
		border-radius: 0rpx 25rpx 0rpx 25rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
	}
	.exclusive-head{
		display: flex;
		align-items: flex-end;
		.exclusive-image{
			width: 136rpx;
			height: 33rpx;
		}
		.exclusive-title{
			font-size: 25rpx;
			color: #444;
			margin-left: 10rpx;
		}
	}
	.exclusive-div2{
		margin: 47rpx 30rpx 0 30rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-evenly;
	}
	.exclusive-div-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		.exclusive-div-title{
			font-size: 46rpx;
			color: #444;
			font-weight: bold;
			margin-bottom: 12rpx;
		}
		.exclusive-div-title2{
			font-size: 25rpx;
			color: #444;
		}
	}
	
}
</style>
